<template>
  <div class="container flex flex_column">
    <!--    顶部导航条-->
    <div class="topNav flex flex_between">
      <div>
        <span class="back mr10 pointer" @click="Back"><i class="el-icon-arrow-left" /> 返回</span>
        <span class="fw">确认开单</span>
      </div>
      <div class="orderTopBtn flex">
        <el-button size="small" class="buttonBox" @click="isOrderCusZhiZi=true"><i class="iconfont orderIco mr5" />客户资质({{ orderIntelligenceTotal }})</el-button>
        <el-button size="small" class="buttonBox" @click="isOrderMaterial=true"><i class="iconfont orderIco mr5" />客户资料({{ orderMaterialTotal }})</el-button>
        <el-button v-loading="orderLoading" type="primary" size="small" :disabled="orderLoading" @click="confirmOrder">确认发布</el-button>
      </div>
    </div>
    <div class="mainCenter">
      <el-form
        ref="orderForm"
        label-position="left"
        :model="orderForm"
        disabled
        label-width="110px"
        cell-class-name
        class="orderForm flex flex_between"
      >
        <div class="leftCon">
          <div class="formBox">
            <div class="cTitle">
              <h3>订单信息</h3>
            </div>
            <div class="formItem">
              <el-form-item label="订单单号">
                <el-input v-model="orderForm.baseData.xieYiShuHao" placeholder="系统自动生成" size="mini" disabled />
              </el-form-item>
              <!-- <el-form-item label="协议书号">
                <el-input v-model="orderForm.baseData.agreementNo" placeholder="系统自动生成" size="mini" disabled />
              </el-form-item> -->
              <el-form-item label="客户名称" prop="productBase.customerName">
                <el-input
                  v-model="orderForm.productBase.customerName"
                  placeholder="选择客户"
                  size="mini"
                  disabled
                >
                  <template slot="append"><i class="el-icon-search" /></template>
                </el-input>
              </el-form-item>
              <el-form-item label="客户单号">
                <el-input v-model="orderForm.baseData.customerBillNo" placeholder="请输入内容" size="mini" disabled />
              </el-form-item>
              <el-form-item label="合同号">
                <el-input
                  v-model="orderForm.baseData.contractNo"
                  placeholder="选择合同"
                  size="mini"
                  disabled
                >
                  <template slot="append"><i class="el-icon-search" /></template>
                </el-input>
              </el-form-item>
              <el-form-item label="订单类型">
                <el-select
                        filterable
                  v-model="orderForm.baseData.orderType"
                  placeholder="请选择活动区域"
                  size="mini"
                  :disabled="isDisable"
                >
                  <el-option v-for="item in orderTypeList" :key="item.objectCode" :label="item.objectName" :value="item.objectCode" />
                </el-select>
              </el-form-item>
              <el-form-item label="送货日期">
                <el-date-picker
                  v-model="orderForm.baseData.expectedDeliveryTime"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  size="mini"
                />
              </el-form-item>
              <el-form-item label="订单备注" class="mt3">
                <el-input
                  v-model="orderForm.baseData.orderRemark"
                  type="textarea"
                  :autosize="{ minRows: 2}"
                  placeholder="请输入内容"
                />
              </el-form-item>
              <el-form-item label="印刷版面" class="mt5">
                <el-input v-model="orderForm.baseData.productVersions" placeholder="印刷版面" size="mini" disabled />
              </el-form-item>
            </div>
            <div class="cTitle">
              <h3>产品信息</h3>
            </div>
            <div class="formItem">
              <el-form-item label="产品名称" prop="productBase.orderProductName">
                <el-input
                  v-model="orderForm.productBase.orderProductName"
                  type="textarea"
                  :autosize="{ minRows: 1}"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                />
              </el-form-item>
              <el-form-item label="产品编码" class="mt3">
                <el-input
                  v-model="orderForm.baseData.productCode"
                  size="mini"
                  disabled
                />
              </el-form-item>
              <el-form-item label="产品版本" class="mt3">
                <el-input v-model="orderForm.baseData.productVersions" placeholder="请输入内容" size="mini" disabled />
              </el-form-item>
              <template v-for="(item,index) in orderForm.productBase.tagDataList">
                <el-form-item :key="index" :label="index===0?'标签':' '" class="mt3">
                  <div class="flex">
                    <div class="flex1">
                      <div>
                        <el-input v-model="item.productTagName" placeholder="标签名称" size="mini" :disabled="isDisable" />
                      </div>
                      <div>
                        <el-input
                          v-model="item.matchQuantity"
                          placeholder="请输入数量"
                          size="mini"
                          :disabled="isDisable"
                        >
                          <template slot="prepend">数量</template>
                        </el-input>
                      </div>
                      <div class="flex">
                        <div class="flex1">
                          <el-input
                            v-model="item.productTagPrice"
                            placeholder="标签单价"
                            size="mini"
                          >
                          <template slot="prepend">单价</template>
                            <template slot="append">元</template>
                          </el-input>
                        </div>
                      </div>
                    </div>
                    <div class="subAddTag" :class="item.comparisonObject!=0?'subtag':''" />
                  </div>
                </el-form-item>
              </template>
            </div>
            <div class="cTitle">
              <h3>订单统计</h3>
            </div>
            <div class="formItem">
              <el-form-item label="套装数量">
                <el-input
                  v-model="orderForm.baseData.taoZhuangQuantity"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append">{{ orderForm.productBase.tagDataList.length>1?'枚':'套' }}</template>
                </el-input>
              </el-form-item>
              <el-form-item label="标签总数">
                <el-input v-model="orderForm.baseData.tagSumQuantity" placeholder="系统计算" size="mini" disabled>
                  <template slot="append">枚</template>
                </el-input>
              </el-form-item>
              <el-form-item label="套装单价">
                <el-input v-model="orderForm.baseData.taoZhuangPrice" placeholder="系统计算" size="mini" disabled>
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="套装总金额">
                <el-input v-model="orderForm.baseData.orderMoney" placeholder="系统计算" size="mini" disabled>
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="实际套装单价">
                <el-input v-model="orderForm.baseData.actualPrice" placeholder="系统计算" size="mini">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="实际总金额">
                <el-input
                  v-model="orderForm.baseData.practicalPayMoney"
                  placeholder="系统计算"
                  size="mini"
                >
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="优惠金额">
                <el-input v-model="orderForm.baseData.discountsMoney" placeholder="系统计算" size="mini" disabled>
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </div>
            <div class="cTitle">
              <h3>标签数据</h3>
            </div>
            <div class="formItem">
              <el-form-item label="数据数量">
                <el-input v-model="orderForm.baseData.tagDataQuantity" placeholder="请输入内容" size="mini" :disabled="isDisable" />
              </el-form-item>
            </div>
            <div class="cTitle">
              <h3>产品包装</h3>
            </div>
            <div class="formItem">
              <el-form-item label="成品样式">
                <el-select
                        filterable
                  v-model="orderForm.productBase.productStyle"
                  placeholder="请选择成品样式"
                  size="mini"
                  :disabled="isDisable"
                >
                  <el-option label="卷式" :value="2" />
                  <el-option label="平张" :value="1" />
                  <el-option label="折页" :value="3" />
                </el-select>
              </el-form-item>
              <el-form-item v-if="orderForm.productBase.productStyle!==1" label="出标方向">
                <el-select
                        filterable
                  v-model="orderForm.productBase.outDirection"
                  placeholder="请选择成品样式"
                  size="mini"
                  :disabled="isDisable"
                >
                  <el-option label="上" :value="1" />
                  <el-option label="下" :value="2" />
                  <el-option label="左" :value="3" />
                  <el-option label="右" :value="4" />
                </el-select>
              </el-form-item>
              <el-form-item v-if="orderForm.productBase.productStyle===2" label="卷向">
                <el-select
                        filterable
                  v-model="orderForm.productBase.scrollDirection"
                  placeholder="请选择成品样式"
                  size="mini"
                  :disabled="isDisable"
                >
                  <el-option label="页面朝内" :value="1" />
                  <el-option label="页面朝外" :value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="贴标方式">
                <el-select
                        filterable
                  v-model="orderForm.productBase.tagAffixWay"
                  placeholder="请选择成品样式"
                  size="mini"
                  :disabled="isDisable"
                >
                  <el-option label="自动帖" :value="1" :disabled="orderForm.productBase.productStyle===1" />
                  <el-option label="手帖" :value="2" />
                </el-select>
              </el-form-item>
              <el-form-item v-if="orderForm.productBase.productStyle===2" label="卷芯大小">
                <el-input
                  v-model="orderForm.productBase.mandrelSize"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append">mm</template>
                </el-input>
              </el-form-item>
              <el-form-item v-if="orderForm.productBase.productStyle===2" label="外直径不超过">
                <el-input
                  v-model="orderForm.productBase.notOverDiameter"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append">mm</template>
                </el-input>
              </el-form-item>
              <el-form-item label="计算方式" v-if="orderForm.productBase.tagDataList.length>1 && orderForm.productBase.productStyle!=2">
                <el-select
                        filterable
                  v-model="orderForm.baseData.calculationMethod"
                  placeholder="请选择计算方式"
                  clearable
                  size="mini"
                  @change="handleSelectChange"
                  :disabled="isDisable"
                >
                <el-option
                label="张/套"
                :value="0"
              >
              </el-option>
              <el-option label="套/张" :value="1"> </el-option>
                </el-select>
              </el-form-item>

              <el-form-item v-if="orderForm.productBase.productStyle===2" label="每卷等于">
                <el-input
                  v-model="orderForm.productBase.pageEqualTags"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append">{{ orderForm.productBase.tagDataList.length>1?'枚':'套' }}</template>
                </el-input>
              </el-form-item>
              <el-form-item v-if="orderForm.productBase.productStyle!==2" label="每张等于">
                <el-input
                  v-model="orderForm.productBase.pageEqualTags"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append">{{ orderForm.productBase.tagDataList.length>1?'枚':'套' }}</template>
                </el-input>
              </el-form-item>
              <el-form-item v-if="orderForm.productBase.productStyle!==2" label="每包等于">
                <el-input
                  v-model="orderForm.productBase.packageEqualPages"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append">张</template>
                </el-input>
              </el-form-item>
              <el-form-item label="每箱等于">
                <el-input
                  v-model="orderForm.productBase.boxEqualPackages"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append">包</template>
                </el-input>
              </el-form-item>
              <el-form-item label="每箱共计">
                <el-input
                  v-model="orderForm.productBase.boxEqualTags"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append">{{ orderForm.productBase.tagDataList.length>1?'枚':'套' }}</template>
                </el-input>
              </el-form-item>
            </div>
            <div class="cTitle">
              <h3>其他信息</h3>
            </div>
            <div class="formItem">
              <el-form-item label="业务员">
                <el-input
                  v-model="orderForm.baseData.salesmanName"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append"><i class="el-icon-search" /></template>
                </el-input>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input
                  v-model="orderForm.baseData.salesmanMobile"
                  placeholder="请输入内容"
                  size="mini"
                  :disabled="isDisable"
                >
                  <template slot="append"><i class="el-icon-search" /></template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="cenCon">
          <div class="tagsNav">
            <ul class="flex">
              <template v-for="(tags, index) in orderForm.productBase.tagDataList">
                <li :key="tags.tagClientCode" @click="tagChoice(index)"><span
                  :class="tagIndex===index?'on':''"
                >{{ tags.productTagName }}</span></li>
              </template>
            </ul>
          </div>
          <div class="tagsBox flex flex_between">
            <div class="tagsLfBox flex-column-center">
              <!--  标签介绍 -->
              <div class="tagShow">
                <ul>
                  <li v-if="getPrintingMaterial">
                    使用材质: <span>{{ getPrintingMaterial }}</span>
                  </li>
                  <li v-if="getSurfaceRequireList.length>0">
                    表面要求:
                    <template v-for="item in getSurfaceRequireList">
                      <span :key="item">{{ item }}</span>
                    </template>
                  </li>
                  <li v-if="getBottomColor">
                    底膜颜色: <span>{{ getBottomColor }}</span>
                  </li>
                  <li v-if="getScrapingCoatingColor">
                    刮开涂层: <span>{{ getScrapingCoatingColor }}</span>
                  </li>
                  <li v-if="getScrapingWordColor">
                    刮开文字: <span>{{ getScrapingWordColor }}</span>
                  </li>
                  <li v-if="orderForm.productBase.tagDataList[tagIndex].layerDataList[layerIndex].technoPlaces">
                    数码: <span>{{
                      orderForm.productBase.tagDataList[tagIndex].layerDataList[layerIndex].technoPlaces
                    }}位</span>
                  </li>
                </ul>
              </div>
              <!--  标签形状  -->
              <div class="labelBox" :class="tagShapeClass">
                <div class="xuxianBox flex-column-center">
                  <div class="flex flexs_center">
                    <div v-if="orderForm.productBase.tagDataList[tagIndex].layerDataList[layerIndex].isHaveTechno != 0" class="flex-column-center mr15">
                      <span class="digital"><i class="iconfont digitalIco" /></span>
                      <span>数码</span>
                    </div>
                    <div v-if="orderForm.productBase.tagDataList[tagIndex].layerDataList[layerIndex].isHaveBarCode != 0" class="flex-column-center">
                      <span class="barCode"><i class="iconfont barCodeIco" /></span>
                      <span>条码</span>
                    </div>
                  </div>
                </div>
                <div class="tpBorder jiaobiaoLT" />
                <div class="tpBorder jiaobiaoRT" />
                <div class="tpBorder jiaobiaoLB" />
                <div class="tpBorder jiaobiaoRB" />
                <!-- 异形的时候出现    -->
                <div class="yixing">
                  <div class="yibg1" />
                </div>
                <!--标签类型 --刮开涂层  -->
                <div class="yuan">
                  <div v-if="orderForm.productBase.tagDataList[tagIndex].tagType === 2 || orderForm.productBase.tagDataList[tagIndex].tagType === 3" class="tagType">
                    揭开
                  </div>
                  <!--  刮开涂层 -->
                  <div v-if="orderForm.productBase.tagDataList[tagIndex].tagType === 1 || orderForm.productBase.tagDataList[tagIndex].tagType === 3" class="coating">
                    刮开涂层
                  </div>
                </div>
                <!--  标签长度 -->
                <div class="tagWidth">长：{{ orderForm.productBase.tagDataList[tagIndex].tagWidth || 0 }} mm</div>
                <!--  R角，边空 -->
                <div class="tagBorder">
                  <div>R角：{{ orderForm.productBase.tagDataList[tagIndex].tagBorderRadius || 0 }} mm</div>
                  <div>边空：{{ orderForm.productBase.tagDataList[tagIndex].tagBorder || 0 }} mm</div>
                </div>
                <!--  标签宽度 -->
                <div class="tagHeight flex-column-center">宽：{{ orderForm.productBase.tagDataList[tagIndex].tagHeight || 0 }} mm</div>
              </div>
              <!--  印刷层  -->
              <div class="yinshuaBox flex flex_center">
                <ul v-if="orderForm.productBase.tagDataList[tagIndex].layerDataList.length>1" class="flex flex_center">
                  <template v-for="(item, index) in orderForm.productBase.tagDataList[tagIndex].layerDataList">
                    <li v-if="index===0" :key="item.layerClientCode" :class="layerIndex === index?'on':''" @click="layerChange(index)">印刷表面</li>
                    <li v-else :key="item.layerClientCode" :class="layerIndex === index?'on':''" @click="layerChange(index)">印刷层{{ index }}</li>
                  </template>
                </ul>
              </div>
            </div>
            <!--   尺寸，印刷，颜色   -->
            <div class="tagsRgBox">
              <div class="tabCon pt16">
                <!-- 尺寸   -->
                <div v-if="tabsIndex===0">
                  <div class="cTitle">
                    <h3>标签属性</h3>
                  </div>
                  <div class="formItem">
                    <el-form-item label="标签形状">
                      <el-select
                        filterable
                        v-model="orderForm.productBase.tagDataList[tagIndex].tagShape"
                        placeholder="请选择标签形状"
                        size="mini"
                        :disabled="isDisable"
                        @change="shpeChange"
                      >
                        <el-option v-for="item in tagShapeList" :key="item.objectCode" :label="item.objectName" :value="item.objectCode" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="长度">
                      <el-input v-model="orderForm.productBase.tagDataList[tagIndex].tagWidth" placeholder="请输入长度" size="mini" :disabled="isDisable">
                        <template slot="append">mm</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="宽度">
                      <el-input v-model="orderForm.productBase.tagDataList[tagIndex].tagHeight" placeholder="请输入长度" size="mini" :disabled="isDisable">
                        <template slot="append">mm</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="R角">
                      <el-input v-model="orderForm.productBase.tagDataList[tagIndex].tagBorderRadius" placeholder="请输入长度" size="mini" :disabled="isDisable">
                        <template slot="append">mm</template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="边空">
                      <el-input v-model="orderForm.productBase.tagDataList[tagIndex].tagBorder" placeholder="请输入长度" size="mini" :disabled="isDisable">
                        <template slot="append">mm</template>
                      </el-input>
                    </el-form-item>
                    <div class="cTitle">
                      <h3>印刷</h3>
                    </div>
                    <div class="formItem mt8">
                      <el-form-item label="标签类型">
                        <el-select
                        filterable
                          v-model="orderForm.productBase.tagDataList[tagIndex].tagType"
                          placeholder="请选择标签类型"
                          size="mini"
                          :disabled="isDisable"
                        >
                          <el-option v-for="item in labelTypeLists" :key="item.code" :label="item.name" :value="item.code" />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="被贴物">
                        <el-input v-model="orderForm.productBase.tagDataList[tagIndex].postedContent" placeholder="请输入被贴物" size="mini" :disabled="isDisable" />
                      </el-form-item>
                    </div>
                    <template v-for="(layer, index) in orderForm.productBase.tagDataList[tagIndex].layerDataList">
                      <div :key="layer.layerClientCode">
                        <div class="cTitle">
                          <h3 v-if="index ===0">印刷表面</h3>
                          <h3 v-else>印刷层{{ index }}</h3>
                        </div>
                        <div class="formItem">
                          <el-form-item label="材料">
                            <el-select
                        filterable
                              v-model="layer.printingMaterial"
                              placeholder="请选择材料"
                              size="mini"
                              :disabled="isDisable"
                            >
                              <el-option v-for="item in printMaterials" :key="item.objectCode" :label="item.objectName" :value="item.objectCode" />
                            </el-select>
                          </el-form-item>
                          <el-form-item v-if="index===0" label="表面要求">
                            <el-select
                        filterable
                              v-model="layer.surfaceRequireList"
                              placeholder="请选择表面要求"
                              multiple
                              size="mini"
                              :disabled="isDisable"
                            >
                              <el-option v-for="item in requireDataLists" :key="item.objectCode" :label="item.objectName" :value="item.objectCode" />
                            </el-select>
                          </el-form-item>
                          <el-form-item label="底膜颜色">
                            <el-select
                        filterable
                              v-model="layer.baseFilmColor"
                              placeholder="请选择颜色"
                              size="mini"
                              :disabled="isDisable"
                            >
                              <el-option v-for="item in baseFilmColorLists" :key="item.colorCode" :label="item.colorName" :value="item.colorCode" />
                            </el-select>
                          </el-form-item>
                          <template v-if="index===0">
                            <el-form-item v-if="orderForm.productBase.tagDataList[tagIndex].tagType === 1 || orderForm.productBase.tagDataList[tagIndex].tagType === 3" label="刮开涂层颜色">
                              <el-select
                        filterable
                                v-model="layer.scrapingCoatingColor"
                                placeholder="请选择颜色"
                                size="mini"
                                :disabled="isDisable"
                              >
                                <el-option v-for="item in baseFilmColorLists" :key="item.colorCode" :label="item.colorName" :value="item.colorCode" />
                              </el-select>
                            </el-form-item>
                          </template>
                          <template v-if="index===0">
                            <el-form-item v-if="orderForm.productBase.tagDataList[tagIndex].tagType === 1 || orderForm.productBase.tagDataList[tagIndex].tagType === 3" label="刮开文字颜色">
                              <el-select
                        filterable
                                v-model="layer.scrapingWordColor"
                                placeholder="请选择颜色"
                                size="mini"
                                :disabled="isDisable"
                              >
                                <el-option v-for="item in baseFilmColorLists" :key="item.colorCode" :label="item.colorName" :value="item.colorCode" />
                              </el-select>
                            </el-form-item>
                          </template>
                          <el-form-item label="数码位数">
                            <div class="flex">
                              <div class="mr10">
                                <el-switch
                                  v-model="layer.isHaveTechno"
                                  active-color="#3F61F1FF"
                                  inactive-color="#D2D5DAFF"
                                  :active-value="1"
                                  :inactive-value="0"
                                  :disabled="isDisable"
                                />
                              </div>
                              <div class="flex1">
                                <el-input
                                  v-model="layer.technoPlaces"
                                  placeholder="请输入数码位数"
                                  size="mini"
                                  :disabled="isDisable || !Boolean(Number(layer.isHaveTechno))"
                                  type="number"
                                />
                              </div>
                            </div>
                          </el-form-item>
                          <el-form-item label="数码颜色">
                            <el-select
                        filterable
                              v-model="layer.technoColor"
                              :disabled="isDisable"
                              placeholder="请选择"
                              size="mini"
                            >
                              <el-option label="黑码" :value="0"> </el-option>
                              <el-option label="彩码" :value="1"> </el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="条码位数">
                            <div class="flex">
                              <div class="mr10">
                                <el-switch
                                  v-model="layer.isHaveBarCode"
                                  active-color="#3F61F1FF"
                                  inactive-color="#D2D5DAFF"
                                  :active-value="1"
                                  :inactive-value="0"
                                  :disabled="isDisable"
                                />
                              </div>
                              <div class="flex1">
                                <el-input
                                  v-model="layer.barCodePlaces"
                                  placeholder="请输入条码位数"
                                  size="mini"
                                  :disabled="isDisable || !Boolean(Number(layer.isHaveBarCode))"
                                  type="number"
                                />
                              </div>
                            </div>
                          </el-form-item>
                          <el-form-item label="是否留胶">
                            <div class="flex">
                              <div class="mr10">
                                <el-switch
                                  v-model="layer.isLiuJiao"
                                  active-color="#3F61F1FF"
                                  inactive-color="#D2D5DAFF"
                                  :active-value="1"
                                  :inactive-value="0"
                                  :disabled="isDisable"
                                />
                              </div>
                              <div class="flex1">
                                <el-select
                        filterable
                                  v-model="layer.liuJiaoTexture"
                                  placeholder="请选择留胶材质"
                                  size="mini"
                                  :disabled="isDisable || !Boolean(Number(layer.isLiuJiao))"
                                >
                                  <el-option v-for="item in liuJiaoDataLists" :key="item.objectCode" :label="item.objectName" :value="item.objectCode" />
                                </el-select>
                              </div>
                            </div>
                          </el-form-item>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 客户资质弹框   -->
    <el-dialog
      title="订单客户资质"
      :visible.sync="isOrderCusZhiZi"
      :close-on-click-modal="false"
      append-to-body
      custom-class="bodyNoPadDialog btBorderNo bigDialog"
      width="70%"
    >
      <div class="dialogDody">
        <!-- 表格区域       -->
        <div class="tableCon lastTdNoBorder">
          <el-table
            v-loading="dataLoading"
            :data="orderCertificationDataList"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="certificationName"
              label="资质名称"
              min-width="110"
            />
            <el-table-column
              prop="certificationTypeName"
              label="资质类型"
              show-overflow-tooltip
              min-width="110"
            />
            <el-table-column
              prop="fileTypeName"
              label="文件类型"
              min-width="100"
            />
            <el-table-column
              prop="fileSize"
              label="文件大小"
              min-width="90"
            >
              <template slot-scope="{row}">
                {{ convertBytes(row.fileSize) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="uploadFileTime"
              label="上传日期"
              min-width="120"
            >
              <template slot-scope="{row}">
                {{ parseTime(row.uploadFileTime,'{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column
              prop="uploadPersonName"
              label="上传人员"
              min-width="90"
            />
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isOrderCusZhiZi=false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 客户资料弹框   -->
    <el-dialog
      title="订单客户资料"
      :visible.sync="isOrderMaterial"
      :close-on-click-modal="false"
      append-to-body
      custom-class="bodyNoPadDialog btBorderNo bigDialog"
      width="70%"
    >
      <div class="dialogDody">
        <!-- 表格区域       -->
        <div class="tableCon lastTdNoBorder">
          <el-table
            v-loading="dataLoading"
            :data="orderInfoDataList"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="informationName"
              label="资料名称"
              min-width="110"
            />
            <el-table-column
              prop="informationTypeName"
              label="资料类型"
              show-overflow-tooltip
              min-width="110"
            />
            <el-table-column
              prop="fileTypeName"
              label="文件类型"
              min-width="100"
            />
            <el-table-column
              prop="fileSize"
              label="文件大小"
              min-width="100"
            >
              <template slot-scope="{row}">
                {{ convertBytes(row.fileSize) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="uploadFileTime"
              label="上传日期"
              min-width="120"
            >
              <template slot-scope="{row}">
                {{ parseTime(row.uploadFileTime,'{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column
              prop="uploadPersonName"
              label="上传人员"
              min-width="80"
            />
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isOrderMaterial=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { formatbytes, parseTime } from '@/utils'
import { uuid } from 'vue-uuid'
export default {
  name: '',
  data() {
    return {
      orderTypeList:[], //订单类型数据
      tabsIndex: 0, // 右侧tabs切换索引
      tagIndex: 0, // 当前标签索引
      layerIndex: 0, // 当前标签下面的当前印刷层
      orderIntelligenceTotal: 0, // 客户资质总条数
      orderMaterialTotal: 0, // 客户资料总条数
      isDisable: true,
      dataLoading: false, // 数据加载中
      isOrderCusZhiZi: false, // 订单客户资质弹框是否打开
      isOrderMaterial: false, // 订单客户资料弹框是否打开
      orderLoading: false, // 确认发布加载效果
      orderForm: {
        isCreateNewOrder: '',
        excuteAction: '',
        baseData: {
          orderID: 0,
          orderNo: '',
          oldOrderNo: '',
          agreementNo: '',
          orderType: 2,
          customerCode: '',
          contractCode: '',
          productCode: '',
          orderProductName: '', // 订单号+产品名称
          expectedDeliveryTime: '',
          printingSurface: '',
          orderRemark: '',
          productVersions: '',
          taoZhuangQuantity: '',
          tagSumQuantity: '',
          taoZhuangPrice: '', // 套装单价
          tagDataQuantity: '', // 数据数量
          orderMoney: '',
          actualPrice: '', // 实际单价
          practicalPayMoney: '',
          discountsMoney: '',
          salesmanNo: '', // 订单业务人员（订单创建人员）
          salesmanName: '', // 订单业务人员（显示名）
          salesmanMobile: '' // 业务员联系电话
        },
        productBase: {
          orderProductID: 0, // 订单产品主键ID
          productCode: '',
          productCode: '',
          productName: '',
          orderProductName: '', // 订单号+产品名称
          customerCode: '',
          customerName: '',
          newVersion: '', // 新版递增值
          updateVersion: '', // 改版递增值
          tagCount: '', // 套标数量（标签个数）
          orderProductPrice: '', // 等于套装单价
          productStyle: 2,
          tagAffixWay: 2,
          outDirection: 1,
          scrollDirection: 1,
          mandrelSize: '',
          notOverDiameter: '', // 外直径不超过
          pageEqualTags: '',

          packageEqualPages: 1,
          boxEqualPackages: '',
          boxEqualTags: '', // 每箱共计X枚数
          tagDataList: [
            {
              tagClientCode: uuid.v4(), // 标签前端唯一码
              productTagID: 0,
              productTagCode: '',
              productCode: '',
              productTagName: '标签1',
              comparisonObject: 0,
              percentageValue: '',
              matchQuantity: 1,
              parentNum: 1,
              productTagPrice: '',
              tagShape: 'TagShape1',
              tagWidth: '', // 标签长度
              tagHeight: '',
              tagBorderRadius: '', // R角
              tagBorder: '', // 边空
              tagType: 4, // 标签类型
              postedContent: '', // 被贴物
              layerDataList: [ // 印刷层集合
                {
                  layerClientCode: uuid.v1(), // 标签印刷层前端唯一码
                  printingLayerID: '', // 标签印刷层主键ID
                  printingLayerCode: '', // 标签印刷层代码
                  productTagCode: '', // 产品标签代码
                  isSurfaceLayer: 1, // 是否为表面层1是；0否
                  printingLayerName: '印刷表面',
                  printingMaterial: '', // 印刷材料
                  surfaceRequireList: [], // 表面要求
                  baseFilmColor: '',
                  scrapingCoatingColor: '',
                  scrapingWordColor: '',
                  isHaveTechno: 0, // 是否有数码 0否；1是
                  technoPlaces: '', // 数码位数
                  isHaveBarCode: 0, // 是否有条码 0否；1是
                  barCodePlaces: '', // 条码位数
                  isLiuJiao: 1, // 是否留胶：1是；0否
                  liuJiaoTexture: '' // 留胶材质
                }
              ], // 标签印刷底层数
              children: [] // 前端自用字段，标签子级
            }
          ]
        }
      },
      labelTypeLists: [
        { name: '刮开', code: 1 },
        { name: '揭开', code: 2 },
        { name: '刮开+揭开', code: 3 },
        { name: '印刷', code: 4 }
      ], // 标签类型
      liuJiaoDataLists: [], // 留胶材质
      baseFilmColorLists: [], // 颜色列表
      orderCertificationDataList: [], // 订单客户资质列表
      orderInfoDataList: [], // 订单客户资料列表
      tagShapeClass: '',
      printMaterials: [], // 印刷材料
      tagShapeList: [], // 得到标签形状
      requireDataLists: [] // 表面要求
    }
  },
  computed: {
    // 标签类型
    getTagType() {
      const tagTypeCode = this.orderForm.productBase.tagDataList[this.tagIndex].tagType
      const obj = this.labelTypeLists.find((item) => item.code === tagTypeCode)
      return obj && obj.name || ''
    },
    // 印刷材料
    getPrintingMaterial() {
      const objectCode = this.orderForm.productBase.tagDataList[this.tagIndex].layerDataList[this.layerIndex].printingMaterial
      const obj = this.printMaterials.find((item) => item.objectCode === objectCode)
      return obj && obj.objectName || ''
    },
    // 表面要求
    getSurfaceRequireList() {
      const objectCode = this.orderForm.productBase.tagDataList[this.tagIndex].layerDataList[this.layerIndex].surfaceRequireList
      const newArry = []
      objectCode.forEach(item => {
        const obj = this.requireDataLists.find((m) => m.objectCode === item)
        if (obj) {
          newArry.push(obj.objectName)
        }
      })
      return newArry
    },
    // 底膜颜色
    getBottomColor() {
      const colorCode = this.orderForm.productBase.tagDataList[this.tagIndex].layerDataList[this.layerIndex].baseFilmColor
      const obj = this.baseFilmColorLists.find((item) => item.colorCode === colorCode)
      return obj && obj.colorName || ''
    },
    // 刮开涂层颜色
    getScrapingCoatingColor() {
      const colorCode = this.orderForm.productBase.tagDataList[this.tagIndex].layerDataList[this.layerIndex].scrapingCoatingColor
      const obj = this.baseFilmColorLists.find((item) => item.colorCode === colorCode)
      return obj && obj.colorName || ''
    },
    // 刮开文字颜色
    getScrapingWordColor() {
      const colorCode = this.orderForm.productBase.tagDataList[this.tagIndex].layerDataList[this.layerIndex].scrapingWordColor
      const obj = this.baseFilmColorLists.find((item) => item.colorCode === colorCode)
      return obj && obj.colorName || ''
    }
  },
  created() {
    // 得到订单详情数据
    this.getOderDetail()
    // 留胶材质列表
    this.getLiuJiaoList()
    // 底膜颜色、刮开涂层颜色、刮开文字颜色等列表
    this.getColorList()
    // 得到表面要求
    this.getRequireDataList()
    // 得到印刷材料
    this.getPrintingMaterials()
    // 得到标签形状数据列表
    this.getShapeList()
    this.getorderType()
  },
  mounted() {
  },
  methods: {

    //获取订单类型
    getorderType(){
      this.$api.business.GetSaleOrderTypeDataList().then((res)=>{
        this.orderTypeList = res
      })
    },
    parseTime(time, cFormat) {
      return parseTime(time, cFormat)
    },
    // 确认发布
    confirmOrder() {
      const parmas = {
        orderID: this.orderForm.baseData.orderID,
        orderNo: this.orderForm.baseData.orderNo
      }
      this.$confirm('确认发布订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.orderLoading = true
        this.$api.business.SureSaveSaleOrder(parmas).then(res => {
          this.orderLoading = false
          this.$message({
            message: '确认成功',
            type: 'success'
          })
          this.$router.push({
            path: '/business/placeAnOrder'
          })
        }).catch(() => {
          this.orderLoading = false
        })
      })
    },
    // 印刷层切换事件
    layerChange(index) {
      this.layerIndex = index
    },
    // 右侧tab切换
    tabChange(index) {
      this.tabsIndex = index
    },
    // 标签选项卡切换
    tagChoice(index) {
      this.tagIndex = index
      this.layerIndex = 0
      this.tabsIndex = 0
      this.shpeChange()
    },
    // 留胶材质列表
    getLiuJiaoList() {
      this.$api.business.QueryLiuJiaoTextureDataList().then(res => {
        this.liuJiaoDataLists = res
      })
    },
    // 底膜颜色、刮开涂层颜色、刮开文字颜色等列表
    getColorList() {
      const params = {
        colorType: 0,
        likeWords: '',
        useType: 1
      }
      this.$api.business.QueryPrintingColorDataList(params).then(res => {
        this.baseFilmColorLists = res
      })
    },
    // 得到表面要求
    getRequireDataList() {
      this.$api.business.QuerySurfaceRequireDataList().then(res => {
        this.requireDataLists = res
      })
    },
    // 得到印刷材料
    getPrintingMaterials() {
      this.$api.business.QueryPrintingMaterialDataList().then(res => {
        this.printMaterials = res
      })
    },
    // 标签形状改变事件
    shpeChange() {
      const val = this.orderForm.productBase.tagDataList[this.tagIndex].tagShape
      if (val === 'TagShape1') {
        this.tagShapeClass = 'rectangle'
      } else if (val === 'TagShape2') {
        this.tagShapeClass = 'square'
      } else if (val === 'TagShape3') {
        this.tagShapeClass = 'circular'
      } else if (val === 'TagShape4') {
        this.tagShapeClass = 'ellipse'
      } else if (val === 'TagShape5') {
        this.tagShapeClass = 'heteroideus'
      } else {
        this.tagShapeClass = ''
      }
    },
    // 得到标签形状数据列表
    getShapeList() {
      this.$api.business.QueryTagShapeDataList().then(res => {
        this.tagShapeList = res
      })
    },
    // 标签印刷层名字
    getPrintingLayerName(arr) {
      return arr.map(item => {
        const layerArr = this.orderForm.productBase.tagDataList[this.tagIndex].layerDataList
        const obj = layerArr.find(m => {
          return m.layerClientCode === item
        })
        return obj && obj.printingLayerName || ''
      })
    },
    // 颜色参考
    getColorReference(val) {
      if (val === 1) {
        return '彩稿'
      } else if (val === 2) {
        return '样表'
      } else {
        return '封样'
      }
    },
    // 得到订单详情数据
    getOderDetail() {
      const parmas = {
        saleOrderID: this.$route.query.saleOrderID
      }
      this.dataLoading = true
      this.$api.business.GetSaleOrderDetail(parmas).then(res => {
        this.orderForm.baseData = res.baseData
        this.orderForm.productBase = res.productData
        console.log(this.orderForm.baseData)
        this.orderCertificationDataList = res.orderCertificationDataList || []
        this.orderIntelligenceTotal = res.orderCertificationDataList.length
        this.orderInfoDataList = res.orderInfoDataList || []
        this.orderMaterialTotal = res.orderInfoDataList.length
        this.dataLoading = false
        // 标签形状方法
        this.shpeChange()
      }).catch(() => {
        this.dataLoading = false
      })
    },
    // 文件大小单位换算
    convertBytes(val) {
      return formatbytes(val)
    },
    // 返回
    Back() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
.buttonBox{
  font-size: 14px;
  padding: 8px 16px;
}
.colorList{
  margin-top: 10px;
  li{
    border: 1px solid #eeeeef;
    margin-bottom: 10px;
    .fName{
      position: relative;
      &:before{
        content: "";
        position: absolute;
        left: 0;
        height: 22px;
        border-left: 3px solid #3f61f1;
        top: -1px;
      }
    }
    .colorCon{
      line-height: 22px;
      padding: 16px;
    }
  }
}
.newLayeeCon{
  margin-top: 10px;
  .el-button{
    width: 100%;
  }
}
.tagsBox {
  flex: 1;
  height: calc(100% - 36px);
  width: 100%;
  .tagsRgBox {
    width: 320px;
    flex-shrink:0;
    height: 100%;
    border-left: 1px solid #E6E6E6;
    background: #fff;
    overflow: auto;
    .tabBox{
      ul{
        li{
          width: 50%;
          text-align: center;
          height: 32px;
          line-height: 32px;
          border-right: 1px solid #E6E6E6;
          background: #F7F8FAFF;
          border-bottom: 1px solid #E6E6E6;
          cursor: pointer;
          &:last-child{
            border-right: none;
          }
          &.on{
            background: #fff;
            border-bottom: 1px solid #fff;
          }
        }
      }
    }
    .tabCon{
      width: 100%;
      padding: 0 16px;
    }
  }
  .tagsLfBox {
    flex: 1;
    height: 100%;
    background: #F2F4F5FF;
    position: relative;
    width: calc(100% - 320px);
    min-width: 500px;
    overflow-x: auto;
    .yinshuaBox{
      height: 32px;
      position: absolute;
      bottom: 20px;
      left: 0;
      width: 100%;
      ul{
        border: 1px solid #E6E6E6;
        border-radius: 8px;
        overflow: hidden;
        li{
          padding: 8px 16px;
          border-right: 1px solid #E6E6E6;
          background: #fff;
          cursor: pointer;
          &:last-child{
            border-right: none;
          }
          &.on{
            background: #3f61f1;
            color: #fff;
          }
        }
      }
    }
    .tagShow {
      padding: 16px;
      position: absolute;
      left: 0;
      top: 0;

      li {
        line-height: 25px;
        margin-bottom: 5px;
        padding-left: 16px;
        position: relative;

        > span {
          padding: 0 16px;
          display: inline-block;
          margin-left: 10px;
          line-height: 22px;
          border-radius: 22px;
          background: #3f61f1;
          color: #fff;
        }

        &:after {
          content: "";
          position: absolute;
          width: 12px;
          height: 12px;
          background: #3f61f1;
          border-radius: 100%;
          border: 3px solid #CBD5FF;
          top: 6px;
          left: -5px;
        }

        &:before {
          content: "";
          position: absolute;
          top: 10px;
          left: 0px;
        }

        &:not(:last-child):before {
          bottom: -17px;
          background: #3f61f1;
          width: 1px;
        }
      }
    }
    .labelBox{
      width: 400px;
      height: 300px;
      background: #fff;
      position: relative;
      &.square{
        width: 300px;
      }
      &.heteroideus{
        .yixing{
          position: absolute;
          bottom: 0;
          right: 0px;
          width: 100px;
          height: calc(100% - 50%);
          background: #fff;
          padding: 10px 0px 0 10px;
          border: 1px rgba(0,0,0,.1) dashed;
          border-right: none;
          border-bottom: none;
          z-index: 100;
          >.yibg1{
            background: #F2F4F5FF;
            height: 100%;
          }
        }
      }
      &.circular{
        width: 300px;
        border-radius: 100%;
        .xuxianBox{
          border-radius: 100%;
        }
        .yuan{
          width: 300px;
          height: 300px;
          position: absolute;
          left: 0;
          top: 0;
          border-radius: 100%;
          overflow: hidden;
        }
        .tagType{
          width: 100%;
          text-align: center;
          padding: 10px 8px;
        }
      }
      &.ellipse{
        height: 250px;
        border-radius: 50%;
        .xuxianBox{
          height: 232px;
          border-radius: 50%;
        }
        .yuan{
          height: 250px;
          width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          border-radius: 50%;
          overflow: hidden;
        }
        .tagType{
          width: 100%;
          text-align: center;
          padding: 10px 8px;
        }
      }
      .xuxianBox{
        border: 1px dashed #E6E6E6;
        margin: 10px;
        height: calc(100% - 20px);
        .barCode{
          i{
            font-size: 40px;
          }
        }
        .digital{
          i{
            font-size: 40px;
          }
        }
      }
      .tpBorder{
        position: absolute;
        width: 16px;
        height: 16px;
      }
      .coating{
        width: 100%;
        background:rgba(0,0,0,0.5) ;
        text-align: center;
        line-height: 40px;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      .tagBorder{
        position: absolute;
        bottom:100%;
        left: 100%;
        margin-bottom: 5px;
        margin-left: 10px;
        white-space: nowrap;
        line-height: 20px;
      }
      .tagHeight{
        position: absolute;
        bottom: 0;
        top: 0;
        left: 100%;
        margin-left: 10px;
        height: 100%;
        text-align: center;
        white-space: nowrap;
      }
      .tagWidth{
        position: absolute;
        top: -30px;
        left: 0;
        width: 100%;
        text-align: center;
        line-height: 30px;
      }
      .tagType{
        background:#e13335 ;
        border-radius:0 0 8px 0px;
        position: absolute;
        left: 0;
        top: 0;
        color: #fff;
        padding:5px 8px;
      }
      .jiaobiaoRB{
        bottom: -16px;
        right: -16px;
        &:before{
          content: "";
          position: absolute;
          width: 1px;
          height: 10px;
          background: #999aaa;
          top: 5px;
        }
        &:after{
          content: "";
          position: absolute;
          width: 10px;
          height: 1px;
          background: #999aaa;
          top: 0;
          right: 0;
        }
      }
      .jiaobiaoLB{
        bottom: -16px;
        left: -16px;
        &:before{
          content: "";
          position: absolute;
          width: 10px;
          height: 1px;
          background: #999aaa;
          top: 0px;
        }
        &:after{
          content: "";
          position: absolute;
          width: 1px;
          height: 10px;
          background: #999aaa;
          bottom: 0;
          right: 0;
        }
      }
      .jiaobiaoRT{
        right: -16px;
        top: -16px;
        &:before{
          content: "";
          position: absolute;
          width: 1px;
          height: 10px;
          background: #999aaa;
          bottom: 5px;
        }
        &:after{
          content: "";
          position: absolute;
          width: 10px;
          height: 1px;
          background: #999aaa;
          bottom: 0;
          right: 0;
        }
      }
      .jiaobiaoLT{
        left: -16px;
        top: -16px;
        &:before{
          content: "";
          position: absolute;
          width: 10px;
          height: 1px;
          background: #999aaa;
          bottom: 0;
        }
        &:after{
          content: "";
          position: absolute;
          width: 1px;
          height: 10px;
          background: #999aaa;
          bottom: 5px;
          right: 0;
        }
      }
    }
  }
}

.thumbnailBox {
  background: #3f61f110;
  padding: 8px;

  .fileIco {
    color: #fff;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 4px;
    background: #e13335;
  }

  .icoBox {
    height: 36px;
    width: 36px;
  }

  .uploadTxt {
    line-height: 18px;
    margin-left: 10px;
  }
}

.tagdelete {
  display: inline-block;
  background: #F5F7FAFF;
  border: 1px solid #DCDFE6FF;
  border-radius: 4px;
  height: 28px;
  line-height: 28px;
  padding: 0 6px;
  margin-left: 10px;
}

.subAddTag {
  width: 8px;
  height: 40px;
  border: 1px solid #9A9A9AFF;
  border-left: none;
  position: relative;

  &.subtag {
    height: 80px;
  }

  span {
    display: inline-block;
    position: absolute;
    right: -8px;
    color: #3f61f1;
    top: 50%;
    transform: translateY(-50%);
  }
}

.cenCon {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  width: calc(100% - 350px);
  overflow-x: hidden;

  .tagsNav {
    height: 36px;
    border-bottom: 2px solid #3f61f1;
    background: #fff;
    overflow-y: hidden;

    li {
      padding-top: 5px;
      margin-left: 5px;

      > span {
        background: #fff;
        display: inline-block;
        padding: 0 20px;
        line-height: 32px;
        border-radius: 5px 5px 0 0;
        border: 1px solid #D2D2D2FF;
        cursor: pointer;
      }

      > span.on {
        background: #3f61f1;
        color: #fff;
        border: 1px solid #3f61f1;
      }
    }
  }
}

.formBox {
  padding: 0 16px;
}

.orderForm {
  height: 100%;
  width: 100%;
}

.mainCenter {
  height: calc(100% - 52px);
  width: 100%;
  overflow-x: hidden;
}

.container {
  height: 100%;
  width: 100%;
}

</style>
<style lang="scss">
.btBorderNo{
  .el-dialog__header {
    border-bottom: none;
  }
}
.selectd {
  td {
    background: #3f61f110;
  }
}

.formItem {
  .el-form-item {
    margin-bottom: 0
  }

  .el-form-item__label {
    line-height: 37px
  }

  .el-form-item__content {
    line-height: 37px;

    .el-input-group {
      vertical-align: initial;
    }
  }

  .el-select, .el-date-editor.el-input {
    width: 100%;
  }

  .el-textarea {
    vertical-align: middle;
  }
}
</style>
